<template>
  <view class="roc-upload-image">
    <roc-upload
      v-if="isShow"
      :action="action"
      :header="header"
      :disabled="disabled"
      :file-list="fileList"
      :show-progress="false"
      :max-count="limit"
      @on-success="successUpload"
      @on-error="errorUpload"
      @on-remove="remove"
      :width="width"
      :height="height"
      :name="name"
      :deletable="deleteBtnShow"
      :addBtnShow="addBtnShow"
    ></roc-upload>
  </view>
</template>

<script>
import Emitter from './mixins/emitter.js'
import RocUpload from './components/roc-upload/roc-upload.vue'

export default {
  name: 'roc-upload-image',
  mixins: [Emitter],
  components: {
    RocUpload,
  },
  props: {
    // 宽（单位px）
    width: {
      type: Number,
      default: 70,
    },
    // 高（单位px）
    height: {
      type: Number,
      default: 70,
    },
    // 是否禁用（禁用后只能看图片，删除按钮和添加按钮都不显示，它的优先级是高于 addBtnShow 和 deleteBtnShow）
    disabled: {
      type: Boolean,
      default: false,
    },
    // 是否显示添加按钮
    addBtnShow: {
      type: Boolean,
      default: true,
    },
    // 是否显示删除按钮
    deleteBtnShow: {
      type: Boolean,
      default: true,
    },
    // 图片回显基础地址（如果服务端返回是完整路径可不传）
    baseUrl: {
      type: String,
      default: '',
    },
    // 上传接口地址
    action: {
      type: String,
      default: '',
      required: true,
    },
    // 上传接口地址后端接收文件的字段
    name: {
      type: String,
      default: 'file',
    },
    // 上传接口地址上传成功的code
    successCode: {
      type: Number,
      default: 200,
    },
    // 上传接口携带header
    header: {
      type: Object,
      default() {
        return {}
      },
    },
    // 上传个数
    limit: {
      type: Number,
      default: 1,
    },
    // 图片列表
    value: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      isShow: true,
      fileList: [],
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.fileList = newVal.map((url) => {
          if (url.includes(this.baseUrl)) {
            return { url }
          } else {
            return { url: `${this.baseUrl}${url}` }
          }
        })
        this.isShow = false
        this.$nextTick(() => {
          this.isShow = true
        })
      },
      immediate: true,
    },
  },
  methods: {
    successUpload(data, index, lists, name) {
      this.changes(lists)
    },
    remove(index, lists, name) {
      this.changes(lists)
    },
    changes(lists) {
      let urls = []
      lists.forEach((item) => {
        // 编辑时，已存在的图片没有response，此处的response是后端返回的数据，非http请求的response
        if (!item.response) {
          if (item.progress == 100) urls.push(item.url)
        } else if (item.response.code == this.successCode) {
          urls.push(item.response.data)
        }
      })
      this.$emit(
        'input',
        urls.map((url) => url.replace(this.baseUrl, ''))
      )
    },
    errorUpload(e) {
      this.$u.toast('上传失败了！')
    },
  },
}
</script>

<style lang="scss" scoped>
.roc-upload-image {
  width: 100%;
}
</style>
